<template>
    <div class="product-list">
        <div class="show">
            <div class="search-box">
                <div @click="back" class="back"><span class="back-icon iconfont icon-fanhui"></span></div>
                <div class="search"><span class="search-icon iconfont icon-icon-test2"></span></div>
            </div>
            <div class="show-img">
                <img src="" alt="">
            </div>


        </div>
        <div class="content">
            <div class="title">
                <p class="title-name">扶手椅</p>
                <div class="sel">
                    <p @click="multiple(0)" :class="sel==0?'sel-card active':'sel-card'">综合</p>
                    <p @click="sales(1)" :class="sel==1?'sel-card active':'sel-card'">销量</p>
                    <p v-if="sel==2&price==false" @click="priceSort(2)" :class="sel==2?'sel-card active':'sel-card'">
                        价格<span
                            class="iconfont icon-quanxianfuzhi"></span></p>
                    <p v-else-if="sel==2&price==true" @click="priceSort(2)"
                       :class="sel==2?'sel-card active':'sel-card'">价格<span
                            class="iconfont icon-arrow_down_full
"></span></p>
                    <p v-else @click="priceSort(2)" :class="sel==2?'sel-card active':'sel-card'">价格<span
                            class="iconfont icon-shangxiajiantou"></span></p>
                </div>
            </div>
            <ul   class="content-box">
                <li  v-for="item in list2" class="card">
                    <router-link class="include" :to="{path:'/details', query:{id:2112}}">
                        <div class="card-content">
                            <div class="product-img"><img src="" alt=""></div>
                            <div class="product-msg">
                                <p class="product-name">{{item.name}}</p>
                                <p class="product-sale">销量:{{item.sale}}</p>
                                <p class="product-price">￥{{item.price}}</p>
                            </div>
                        </div>
                    </router-link>
                </li>
            </ul>



        </div>
    </div>
</template>

<script>
    import http from "../util/http";

    export default {
        name: "productList",
        data() {
            return {
                sel: 0,
                price: false,
                list:[
                    {
                        name:'FLYBACKEN 福贝肯',
                        sale:5245,
                        price:562452,
                        img:''
                    },{
                        name:'FLYBACKEN 福贝肯',
                        sale:45454,
                        price:35248,
                        img:''
                    },{
                        name:'FLYBACKEN 福贝肯',
                        sale:654542,
                        price:4545,
                        img:''
                    },{
                        name:'FLYBACKEN 福贝肯',
                        sale:35437,
                        price:54,
                        img:''
                    },{
                        name:'FLYBACKEN 福贝肯',
                        sale:65141542,
                        price:852452,
                        img:''
                    },
                ],
                list2:[],
            }
        },
        methods: {
            multiple(index) {
                this.sel = index;
                this.list2=[...this.list];
                this.price=false;
                console.log('综合')



            },
            priceSort(index) {
                this.sel = index;
                this.price = !this.price;

                if (this.price) {
                    console.log('降序');
                    this.list2.sort(this.downchange('price'))
                } else {
                    console.log('升序');
                    this.list2.sort(this.upchange('price'))
                }

            },
            sales(index) {
                this.sel = index;
                this.price=false;

                console.log('销量');

                this.list2.sort(this.downchange('sale'))
            },
            back() {
                this.$router.go(-1)
            },

            downchange(property) {
                //降序
                return function (value1, value2) {
                   let v1 = value1[property];
                   let v2 = value2[property];
                   return v2 - v1
               }
            },
            upchange(property) {
                //升序
                return function (value1, value2) {
                    let v1 = value1[property];
                    let v2 = value2[property];
                    return v1 - v2
                }
            }
        },
        created: function () {
            console.log(this.$route.query)
            this.list2=[...this.list];
            http({
                method: 'post',
                url: '/goods/selectAllGoods',

            })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                })

        }
    }
</script>

<style scoped>

</style>